<template>
	<view class="templatePage">
		<view class="screenBox">
			<view class="dayScreen">
				<view :class="['dayItem', archivingCycle == '30' ? 'selectDay' : '']" @click="archivingCycle = '30'">
					近30天
				</view>
				<view :class="['dayItem', archivingCycle == '180' ? 'selectDay' : '']" @click="archivingCycle = '180'">
					近180天
				</view>
			</view>
		</view>

		<view class="qiun-charts">
			<view>
				<echarts :option="optionRow" style="height:900rpx;"></echarts>
				<!-- <echarts :option="optionRow" style="height: 888px"></echarts> -->
			</view>
			<!-- <view class="legend_box">
				<view class="legend">
					<text class="legend_block"></text>合并线索
				</view>
				<view class="legend">
					<text class="legend_block"></text>无效线索
				</view>
				<view class="legend">
					<text class="legend_block"></text>有效线索
				</view>
			</view> -->
			<!-- <canvas canvas-id="canvasChart" id="canvasChart" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas> -->
		</view>
	</view>
</template>

<script>
	import {
		getChannelByDealerId,
		getChannelByAreaId,
		getChannelByGroupId
	} from '@/service/api/api.js';
	// import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import echarts from '@/components/echarts/echarts.vue';


	var canvaColumn = null;
	export default {
		props: {
			// clueId: {
			// 	type: String,
			// 	default: ''
			// }
		},
		components: {
			uniIcons,
			echarts
		},
		filters: {

		},
		data() {
			return {
				userInfo: {},
				archivingCycle: '30',
				// heightX:852,
				chartData: {
					// "categories": ["太平洋", "汽车之家", "爱卡汽车"],
					// "series": [{
					// 	"name": "有效线索",
					// 	"data": [35, 36, 31, 33, 13, 34]
					// }, {
					// 	"name": "无效线索",
					// 	"data": [18, 24, 6, 28, 30, 40]
					// }, {
					// 	"name": "被合并",
					// 	"data": [21, 24, 6, 28, 30, 40]
					// }]
				},
				optionRow: {}

			}
		},
		computed: {

		},
		watch: {
			archivingCycle(newVal) {
				this.getAreaChartData()
			},
			heightX(Val){
				return Val
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.userInfo = uni.getStorageSync('user_info')
				this.getAreaChartData()
			},
			labelFormatter (params) {
				 if (params.value > 0) {
				   return params.value;
				 } else {
				   return '';
				 }
			},

			async getAreaChartData() {
				let res = null
				if (this.userInfo.role == '143' || this.userInfo.role == '144') {
					res = await getChannelByDealerId({
						dealerId: this.userInfo.dealerId || '',
						archivingCycle: this.archivingCycle
					})
				} else if (this.userInfo.role == '139') {
					res = await getChannelByAreaId({ //大区总
						areaId: this.userInfo.userDeptId || '',
						archivingCycle: this.archivingCycle
					})
				} else if (this.userInfo.role == '129') { //集团总
					res = await getChannelByGroupId({
						groupId: this.userInfo.userDeptId || '',
						archivingCycle: this.archivingCycle
					})
				} else if (this.userInfo.role == '155') {
					if (this.userInfo.userDeptId == this.userInfo.deptId && this.userInfo.deptLevel == '30') {
						res = await getChannelByGroupId({
							groupId: this.userInfo.userDeptId || '',
							archivingCycle: this.archivingCycle
						})
					} else {
						res = await getChannelByAreaId({ //大区总
							areaId: this.userInfo.userDeptId || '',
							archivingCycle: this.archivingCycle
						})
					}
				}

				if (res.data.code == '0') {
					let categories = []
					let series = [{
						"name": "有效线索",
						"type":'bar',
						stack: 'total',
						emphasis: {
							focus: 'series'
						},
						label:{
							show: false,
						},
						"data": [],

					}, {
						"name": "无效线索",
						"type":'bar',
						stack: 'total',
						emphasis: {
							focus: 'series'
						},
						label:{
							show: false,
						},
						"data": [],
						
					}, {
						"name": "合并线索",
						"type":'bar',
						stack: 'total',
						emphasis: {
							focus: 'series'
						},
						"data": [],
						label:{
							show: false,
						}
					},
					{
						name:'合计',
						type:'bar',
						stack:'total',
						show:true,
						 barMinHeight:'20',
						 barMaxHeight:'20',
						itemStyle:{						
							opacity:'0',							
						},
						label: {
							show: true,
							stack: 'total',
							offset:[0,0],
							align: 'left',
							opacity:'1'		
						},
						'data':[]  
					}]
					var fun = function (params) {
						var datavalue = 0;
						for (var i = 0; i < series.length; i++) {
							datavalue += series[i].data[params.dataIndex]
						  }
						  
						  return datavalue;
					}
					 series[series.length-1]["label"]["formatter"] = fun;
					let objName = {}
					res.data.data.forEach(item => {
						if(Object.keys(objName).indexOf(item.secondChannelName) == -1) {
							objName[item.secondChannelName] = {
								validCount: item.validCount,
								invalidCount: item.invalidCount,
								mergeCount: item.mergeCount
							}
						} else {
							objName[item.secondChannelName] = {
								validCount: objName[item.secondChannelName].validCount + item.validCount,
								invalidCount: objName[item.secondChannelName].invalidCount + item.invalidCount,
								mergeCount: objName[item.secondChannelName].mergeCount + item.mergeCount
							}
						}
					})
					
					Object.keys(objName).forEach((item, idx) => {
						
						// categories.push(item.secondChannelName)
						series['0'].data.push(objName[item].validCount || '')
						series['1'].data.push(objName[item].invalidCount || '')
						series['2'].data.push(objName[item].mergeCount || '')
						let num=objName[item].validCount+objName[item].invalidCount+objName[item].mergeCount
						series['3'].data.push(num)	
					})
					
					// // categories=Array.from(new Set(categories));
					
					this.chartData = {
						categories: Object.keys(objName),
						series
					}
					// this.heightX=this.chartData.categories.length*20
					this.showCharts(this.chartData)
					
				}
			},
			showCharts(data) {	
				console.log(data.series,'-----------------series')
				this.optionRow = {
					tooltip: {
						trigger: 'axis',
						axisPointer: { // Use axis to trigger tooltip
							type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
						}
					},
					color: ['#53CB88', '#A8AEC9', '#F4C851'],
					legend: {
						data: ['有效线索', '无效线索', '合并线索'],
						itemHeight: 7,
						icon: 'circle',
						left: 10,
						top: 10
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						position: 'top'
					},
					yAxis: {
						type: 'category',
						data: data.categories,
						axisLine: {show:false}
					},
					series:data.series
					// series: 

				}
				

			},
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss'
</style>
<style>
	.qiun-charts {
		height: auto !important;

		// width: 750upx;
		// height: 500upx;
		background-color: #FFFFFF;
		overflow-y: scroll;
	}

	// .charts {
	// 	width: 750upx;
	// 	height: 500upx;
	// 	background-color: #FFFFFF;
	// }
</style>
